<template>
  <div class="cashier" v-if="state.order_info">
    <van-nav-bar class="header" color="#333" title="收银台">
      <template #right>
        <van-icon
          @click="state.goHomeShow = true"
          color="#333"
          name="wap-home-o"
        />
      </template>
    </van-nav-bar>
    <div class="pay_intruduce">
      <span>订单金额:</span>
      <span class="pay_price">￥{{ state.order_info.order_price }}</span>
      <!-- <span>企业支付:</span>
      <span class="pay_price">￥{{ `1553` }}</span>
      <span>超标自费:</span>
      <span class="pay_price">￥{{ `75` }}</span>
      <p>
        请与
        <span class="pay_time">{{ `23:56` }}</span> 内付款，超时订单自动取
        <span class="look_order">查看订单<van-icon name="arrow"/></span>
      </p> -->
    </div>
    <div class="main_pay">
      <div class="main_pay_position">
        <div class="order_detail">
          <p>{{ state.order_info.depart_place }}</p>
          <p>{{ state.order_info.arrive_place }}</p>
          <p>
            {{
              state.order_info.car_type == "1"
                ? "经济型 "
                : state.order_info.car_type == "2"
                ? "舒适型 "
                : state.order_info.car_type == "3"
                ? "豪华型 "
                : state.order_info.car_type == "4"
                ? "商务车"
                : state.order_info.car_type == "5"
                ? "大巴（20人以下）"
                : state.order_info.car_type == "6"
                ? "大巴（20人以上）"
                : state.order_info.car_type == " 7"
                ? "出租车"
                : ""
            }}
          </p>
          <p>{{ state.order_info.depart_time }}用车</p>
        </div>
        <div class="pay_type">
          <van-radio-group
            v-model="state.radio_pay_type"
            v-if="state.pay_type_show"
          >
            <div
              v-for="(item, index) in state.payBtnList"
              :key="item.id"
              class="payTypeBox"
              @click="pay_type_click(item, index)"
            >
              <van-radio
                label-position="left"
                :name="item.id"
                v-show="item.show"
              >
                <img class="icon" :src="item.icon" />
                {{ item.text }}</van-radio
              >
            </div>
          </van-radio-group>
          <div class="pay_type_null" v-else>
            当前暂无可用的支付方式，请联系管理员
          </div>
        </div>
        <div class="pay_button" @click="click_pay">立即支付</div>
      </div>
    </div>
    <!-- 离开收银台-->
    <van-dialog
      v-model:show="state.goHomeShow"
      title="确认离开收银台"
      show-cancel-button
      class="goHome"
    >
      <div class="message"></div>
      <div class="footer">
        <div @click="goHomeCancel" class="button cancel">确认离开</div>
        <div @click="state.goHomeShow = false" class="button confirm">
          继续支付
        </div>
      </div>
    </van-dialog>

    <!-- 月结支付验证码提示 -->
    <transition name="van-slide-right">
      <MonthPayCheck
        v-if="state.monthPayCheck"
        @onBack="state.monthPayCheck = false"
        @checkCodeSuccess="beforeMonthlyKnots"
      ></MonthPayCheck>
    </transition>

    <!-- 月结支付提示 -->
    <van-dialog
      v-model:show="state.isMonthlyKnotsShow"
      theme="round-button"
      title="用车订单支付"
      confirmButtonColor="#FE8F00"
      @confirm="beforeMonthlyKnots"
    >
      <div class="money">¥{{ state.order_info.order_price }}</div>
      <div class="textTips">
        收款方:北京华美逸达航空服务有限公司
      </div>
      <van-icon
        @click="state.isMonthlyKnotsShow = false"
        class="isMonthlyKnotsIcon"
        name="cross"
      />
    </van-dialog>
  </div>
</template>

<script setup>
import { reactive, onMounted, getCurrentInstance, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { dateFormat } from "../../assets/js/public";
import { Toast, Dialog } from "vant";
import { useStore } from "vuex";
import MonthPayCheck from "/@/components/MonthPayCheck/MonthPayCheck.vue";

import payIcon_zfb from "./img/zhifubao.png";
import payIcon_wx from "./img/weixin.png";
import payIcon_card from "./img/yinhangka.png";
import payIcon_month from "./img/yuejie.png";

const store = useStore();
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

const state = reactive({
  pay_type_show: true,
  goHomeShow: false,
  order_id: route.query.order_id,
  order_info: {},
  order_money: "",
  orderTime: "",
  travel_type: "",
  minutes: "1",
  second: "5",
  daoJiShi: null,
  payType: "",
  radio_pay_type: "4",
  payBtnList: [
    {
      id: "1",
      icon: payIcon_zfb,
      text: "支付宝支付",
      show: false
    },
    // {
    //   id: 2,
    //   icon: payIcon_wx,
    //   text: "微信支付",
    //   show: false
    // },
    {
      id: "3",
      icon: payIcon_card,
      text: "银行卡支付",
      show: false
    },
    {
      id: "4",
      icon: payIcon_month,
      text: "月结支付",
      show: false
    }
  ],
  monthPayCheck: false, // 月结支付验证
  isMonthlyKnotsShow: false // 月结支付提示
});

// 计算属性
const computed_state = reactive({
  new_config: reactive(
    computed(() => {
      return store.state.configureInfo;
    })
  )
});

onMounted(() => {
  getCarOrderDetails();
});

// 订单信息
const getCarOrderDetails = async () => {
  const url = "/security/car/queryOrderDetail";
  const data = {
    order_id: state.order_id, // 订单ID
    member_id: localStorage.memberId
  };
  proxy.$axiosJson(url, data).then(res => {
    if (res.ret_code === "10000") {
      console.log(res, 272);
      state.order_info = res.data;
      // state.order_money = res.data.hotel_order.order_price;
      // state.orderTime = res.data.hotel_order.booking_date;
      // state.travel_type = res.data.hotel_order.bissiness_type;
      // getCountDown();
      getAuthorization(); // 获取支付权限
    }
  });
};
const pay_type_click = (item, index) => {
  state.radio_pay_type = item.id;
};

// 获取支付权限 ?????
const getAuthorization = async () => {
  let params = {
    member_id: localStorage.memberId
  };
  let res = await proxy.$axiosJson(
    "/security/v1/common/getPaymentAuthorityInfo",
    params
  );
  console.log(res, 392);
  if (res.ret_code === "10000") {
    /* 判断当前是因公或因私
     +is_because=1因公:
          判断car_month_pay月结支付为true还是false
             +为true：展示月结
             +false：不展示月结
          判断car_personal_pay个人支付为true还是false
             +为true：展示银行卡和支付宝
             +false：不展示银行卡和支付宝
     +is_because=2因私：仅不展示月结,其他的都展示

    */
    if (state.order_info.is_because == 1) {
      if (res.data.car_month_pay) {
        state.payBtnList[2].show = true;
      }
      if (res.data.car_personal_pay) {
        state.payBtnList[0].show = true;
        state.payBtnList[1].show = true;
      }
      if (
        res.data.car_month_pay == false &&
        res.data.car_personal_pay == false
      ) {
        state.pay_typ_show = false;
      }
    } else if (state.order_info.is_because == 2) {
      state.payBtnList[0].show = true;
      state.payBtnList[1].show = true;
    }
  }
};

// 确认离开收银台
const goHomeCancel = () => {
  router.push({
    path: "/"
  });
};

// 点击支付
const click_pay = () => {
  switch (state.radio_pay_type) {
    case "1":
      pay_zfb();
      console.log("支付宝");
      break;
    case "2":
      console.log("微信");
      pay_wx();
      break;
    case "3":
      console.log("银行卡");
      pay_card();
      break;
    case "4":
      console.log("月结");
      state.isMonthlyKnotsShow = true;
      break;
  }
};

// 支付宝支付
const pay_zfb = async () => {
  const data = {
    pay_channel: "H5_SDK",
    order_id: state.order_id,
    member_id: localStorage.memberId,
    forward_url:
      location.href.split("/#/")[0] +
      "/#/CashierSuccess?order_id=" +
      state.order_id
  };
  let res = await proxy.$axiosJson("/security/v1/pay/aliPayPlaceOrder", data);
  if (res.ret_code === "10000") {
    window.location.href = res.data;
  }
};
// 微信支付
const pay_wx = () => {
  console.log("微信支付");
};

//银行卡支付
const pay_card = async pay_sign => {
  const data = {
    pay_channel: "H5_SDK",
    order_id: state.order_id,
    pay_sign: "1",
    member_id: localStorage.memberId,
    forward_url:
      location.href.split("/#/")[0] +
      "/#/CashierSuccess?order_id=" +
      state.order_id
  };
  let res = await proxy.$axiosJson("/security/v1/pay/ybPlaceOrder", data);
  if (res.ret_code === "10000") {
    window.location.href = res.data;
  }
};

// 月结支付
const beforeMonthlyKnots = async check => {
  if (check && computed_state.new_config.month_pay_sms === "1") {
    state.monthPayCheck = true;
    return false;
  }
  const data = {
    pay_channel: "H5_SDK",
    order_id: state.order_id,
    member_id: localStorage.getItem("memberId")
  };
  let res = await proxy.$axiosJson("/security/v1/pay/monPayPlaceOrder", data);
  if (res.ret_code === "10000") {
    paySuccess();
  } else {
    Dialog.alert({
      title: "提示",
      message: res.ret_msg
    });
  }
};

const paySuccess = () => {
  router.push({
    path: "/CashierSuccess",
    query: {
      order_id: state.order_id
    }
  });
};

// 跳转订单详情
const goDetails = () => {
  router.push({
    path: "/CarOrderDetail",
    query: {
      id: state.order_id
    }
  });
};
</script>

<style scoped lang="less">
.cashier {
  .pay_intruduce {
    width: 100%;
    height: 123px;
    background: linear-gradient(90deg, #208cff 0%, #046dfe 100%);
    padding: 25px 45px 0;
    font-size: 14px;
    color: #ffffff;
    line-height: 26px;
    .pay_price {
      font-weight: 600;
      color: #ffd615;
      margin-right: 12px;
    }
    .pay_time {
      font-size: 18px;
      color: #ffd615;
      font-weight: 600;
    }
    .look_order {
      font-weight: 600;
      color: #ffd615;
      margin-left: 22px;
    }
  }
  .main_pay {
    width: 100%;
    padding: 0 15px;
    position: relative;
    .main_pay_position {
      margin: 0 15px;
      position: absolute;
      top: -40px;
      left: 0;
      right: 0;

      div {
        background: #ffffff;
        border-radius: 7px;
      }
      .order_detail {
        width: 100%;
        background: #ffffff;
        padding: 18px 0 30px 30px;
        font-size: 14px;
        font-weight: 600;
        color: #333333;
        line-height: 26px;
        margin-bottom: 10px;
      }

      .pay_type {
        // margin: 0 15px;
        margin-top: 10px;
        margin-bottom: 100px;
        padding: 15px 10px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 3px -2px rgba(230, 234, 238, 1);
        border-radius: 7px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        .payTypeBox:last-child {
          border: none;
        }
        .payTypeBox {
          :deep(.van-radio) {
            height: 50px;
          }
          border-bottom: 1px solid #f2f2f2;
        }
        :deep(.van-radio) {
          .flex;
          align-items: center;
          .icon {
            transform: scale(0.5, 0.5);
          }
          .van-radio__label {
            .flex;
          }
        }
        .pay_type_null {
          width: 100%;
          height: 150px;
          line-height: 150px;
          text-align: center;
          font-size: 14px;
          font-weight: 600;
          color: #333333;
        }
      }
      .pay_button {
        width: 100%;
        height: 49px;
        background: #fe8f00;
        line-height: 49px;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
      }
    }
  }
  .money {
    font-size: 26px;
    font-weight: 500;
    color: #fe8f00;
    line-height: 26px;
    text-align: center;
    margin: 22px 0 8px 0;
  }
  .textTips {
    font-size: 14px;
    font-weight: 500;
    color: #8f8f8f;
    line-height: 14px;
    text-align: center;
    margin-bottom: 25px;
  }
  .isMonthlyKnotsIcon {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #c6c6c6;
  }
  :deep(.van-nav-bar-title) {
    font-weight: 600;
  }
  // .contentWapper {
  //   min-height: 100vh;
  //   background: #f6f7f9;
  //   .top {
  //     font-size: 14px;
  //     font-weight: 400;
  //     color: rgba(255, 255, 255, 1);
  //     line-height: 14px;
  //     padding: 25px 15px 0 15px;
  //     height: 123px;
  //     background: linear-gradient(
  //       90deg,
  //       rgba(32, 140, 255, 1) 0%,
  //       rgba(4, 109, 254, 1) 100%
  //     );
  //     .p {
  //       margin-bottom: 9px;
  //     }
  //     .orderView {
  //       display: flex;
  //       align-items: center;
  //       line-height: 14px;
  //     }
  //   }
  //   .middle {
  //     width: calc(100% - 30px);
  //     position: absolute;
  //     top: 120px;
  //     left: 50%;
  //     transform: translateX(-50%);
  //   }
  //   .hotelInfo {
  //     margin: 0 15px;
  //     margin-top: 10px;
  //     padding: 0 10px;
  //     background: rgba(255, 255, 255, 1);
  //     box-shadow: 0px 2px 3px -2px rgba(230, 234, 238, 1);
  //     border-radius: 7px;
  //     font-size: 14px;
  //     font-weight: 400;
  //     color: rgba(51, 51, 51, 1);
  //     padding: 25px 20px;
  //     .title {
  //       font-size: 14px;
  //       font-weight: 500;
  //       color: #333333;
  //       line-height: 14px;
  //       padding-bottom: 10px;
  //     }
  //     .info {
  //       font-weight: 500;
  //       color: #999999;
  //       font-size: 14px;
  //       line-height: 14px;
  //       padding-bottom: 10px;
  //     }
  //     .text {
  //       padding-bottom: 10px;
  //     }
  //   }

  .pay {
    position: absolute;
    bottom: 30px;
    left: 15px;
    width: calc(100% - 30px);
    background: rgba(254, 143, 0, 1);
    border-radius: 7px;
    height: 49px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    line-height: 49px;
    text-align: center;
  }
  :deep(.van-dialog__header) {
    font-size: 16px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    line-height: 16px;
  }
  :deep(.van-dialog__message) {
    font-size: 14px;
    font-weight: 400;
    color: rgba(143, 143, 143, 1);
    line-height: 20px;
  }
  :deep(.yuebuzu) {
    height: 200px;
    .van-dialog__footer {
      position: absolute;
      bottom: 34px;
      left: 50%;
      transform: translateX(-50%);
      .van-dialog__confirm {
        width: 251px;
        height: 41px;
        background: rgba(32, 140, 255, 1);
        border-radius: 6px;
        color: #fff;
      }
    }
  }
  :deep(.leave) {
    height: 200px;
    .van-dialog__footer {
      position: absolute;
      bottom: 34px;
      left: 50%;
      transform: translateX(-50%);
      .van-dialog__confirm {
        color: #fff;
        width: 116px;
        height: 41px;
        background: rgba(32, 140, 255, 1);
        border-radius: 6px;
      }
      .van-dialog__cancel {
        color: #fff;
        width: 116px;
        height: 41px;
        margin-right: 20px;
        background: rgba(254, 143, 0, 1);
        border-radius: 6px;
      }
    }
  }
  :deep(.goHome) {
    text-align: center;
    .van-dialog__header {
      padding-bottom: 10px;
    }
    .blodMessage {
      font-size: 14px;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      margin: 10px 0;
    }
    .message {
      font-size: 12px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      padding-bottom: 25px;
    }
    .van-dialog__footer {
      display: none;
    }
    .footer {
      padding-bottom: 34px;
      .flex;
      justify-content: space-around;
      .cancel {
        width: 116px;
        height: 41px;
        background: rgba(254, 143, 0, 1);
        border-radius: 6px;
        color: white;
        line-height: 41px;
      }
      .confirm {
        color: white;
        line-height: 41px;
        width: 116px;
        height: 41px;
        background: rgba(32, 140, 255, 1);
        border-radius: 6px;
      }
    }
  }
}
</style>
